<template>
  <div class="check-before">
    <div class="panel">
      <div class="title">验证原密码</div>
      <div class="content">
        <div class="input-group clearfix">
          <div class="left-title">旧密码：</div>
          <div class="right-content">
            <el-input placeholder="请输入旧密码" type="password" v-model="old_password"></el-input>
          </div>
        </div>
        <div class="input-group clearfix">
          <div class="left-title"></div>
          <div class="right-content">
            <el-button type="primary" :style="btnStyle" @click="next" :loading="loading">下一步</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { checkInfo } from 'api/user'
export default {

  name: 'check-before',

  data() {
    return {
      old_password: '',
      loading: false,
      btnStyle: 'background-color:#828282;border-color:#828282;width:100%;'
    };
  },
  methods: {
    next() {
      this.loading = true
      if (this.old_password.trim() === '') {
        this.loading = false
        this.$message({
          message: '请填写旧的密码',
          type: 'warning'
        })
        return false
      }
      checkInfo({
        old_password: this.old_password
      })
      .then(res => {
        this.loading = false
        this.$router.push('/personal/security/set-new')
      })
      .catch(err => {
        this.loading = false
        this.$message({
          message: err.msg || '旧密码验证失败',
          type: 'error'
        })
      })
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.check-before{
  .panel{
    .title{
      background-color: #f4f4f4;
      padding: 0 20px;
      text-align: left;
      height: 40px;
      line-height: 40px;
    }
    .content{
      padding: 30px 0;
      border-bottom: 1px solid #e5e6e7;
    }
    .input-group{
      width: 420px;
      margin: 20px auto;
      .left-title{
        width: 70px;
        height: 30px;
        line-height: 30px;
        float: left;
      }
      .right-content{
        width: 350px;
        float: left;
      }
    }
  }
}
</style>